window.addEventListener('pageshow', function() {
    //顶部导航栏
    var user = document.querySelector('.user a');
    /* 获取登录信息 */
    (function getflag() {
        var flag = window.localStorage.getItem('flag');
        console.log(flag);
        if (flag == 'true') {
            user.href = 'memberCenter.html';
        } else {
            user.href = 'login.html';
        }
        console.log(flag);
    }())


    /* 更多精彩 底部轮播图 */
    function banner() {
        /* banner轮播图 */
        var banner_ul = this.document.querySelector('.design_body .focus');
        /* 轮播图里的图 */
        var banner_pic = banner_ul.children;
        /* banner轮播图的小球 */
        var banner_ball = this.document.querySelector('.design_body .bannerBall ul');
        /* banner宽 */
        var banner = banner_ul.parentNode;
        var basewidth = banner.offsetWidth;
        /* 轮播图每增加一整图片 ul的长度增加 */
        banner_ul.style.width = (banner_pic.length * basewidth) + 'px';
        //创建小球 animate
        /* for (var i = 1; i < banner_pic.length - 1; i++) {
            //创建小球
            var li = this.document.createElement('li');
            //添加属性
            li.setAttribute('index', i);
            //插入小球
            banner_ball.appendChild(li)
                //默认第一个小球颜色是白色
            banner_ball.children[0].classList.add('current');
        } */
        // (一) 轮播图动画
        var index = 0;
        var timer = setInterval(() => {
            index++;
            var translateX = -index * basewidth;
            //实现过度动画 transition
            banner_ul.style.transition = 'all 0.3s ease-out';
            banner_ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
        //等着过度完成之后 再去判断  监听过度完成的事件 transitionend
        banner_ul.addEventListener('transitionend', function() {
            // 无缝滚动 原理：如果索引号等于3 说明走到最后一张 此时快速回到第一张，并且将索引号恢复为0
            if (index >= 5) {
                index = 0;
                //此时图片去掉过渡效果，然后移动
                banner_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            } else if (index < 0) {
                index = 2;
                //此时图片去掉过渡效果，然后移动
                banner_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            }
            /* //小圆点跟随变化
            // 1. 把ol里面li带有current类名的选出来去掉类名remove
            banner_ball.querySelector('.current').classList.remove('current');

            // 2. 让当前索引号的小li加上current add
            banner_ball.children[index].classList.add('current'); */
        })

        // (二) 手指滑动轮播图
        // 触摸元素 touchstart：获取手指初始坐标
        var startX = 0;
        var moveX = 0;
        var flag = false;
        banner_ul.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            // 手指触摸的时候停止定时器
            clearInterval(timer);
        });
        // 移动手指 touchmove：计算手指滑动的距离，并且移动盒子
        banner_ul.addEventListener('touchmove', function(e) {
            // 移动距离
            moveX = e.targetTouches[0].pageX - startX;
            // 移动盒子：盒子原来的位置 + 手指移动的距离
            var translatex = -index * basewidth + moveX;
            // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
            banner_ul.style.transition = 'none';
            banner_ul.style.transform = 'translateX(' + translatex + 'px)';
            flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
            e.preventDefault(); // 阻止滚动屏幕的行为
        });
        // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
        banner_ul.addEventListener('touchend', function(e) {
            if (flag) {
                // (1) 如果移动距离大于50像素，我们就播放上一张
                if (Math.abs(moveX) > 100) {
                    // 如果是右滑 就是播放上一张 moveX是正值
                    if (moveX > 0) {
                        index--;
                    } else {
                        // 如果是左滑 就是播放下一张 moveX是负值
                        index++;
                    }
                    var translatex = -index * basewidth;
                    banner_ul.style.transform = 'translateX(' + translatex + 'px)';
                    banner_ul.style.transition = 'all 0.3s ease-out';
                } else {
                    // (2) 如果移动距离小于50像素 我们就弹回
                    var translatex = -index * basewidth;
                    banner_ul.style.transform = 'translateX(' + translatex + 'px)';
                    banner_ul.style.transition = 'all 0.3s ease-out';
                }
            }
            // 手指离开的时候就重新开启定时器
            clearInterval(timer);
            timer = setInterval(() => {
                index++;
                var translateX = -index * basewidth;
                //实现过度动画 transition
                banner_ul.style.transition = 'all 0.3s ease-out';
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            }, 2000);
        })
    }
    banner();

})